<!--
 * @Author: zsc
 * @Date: 2022-06-13 21:56:52
 * @LastEditors: zsc
 * @LastEditTime: 2022-07-21 20:36:45
 * @Description:
-->

<template>

  <el-dialog
    :before-close="beforeClose"
    :visible.sync="show"
    :title="title"
    width="80%"
    append-to-body
    @close="close"
    @closed="closed"
  >
    <div class="app-container">
      <!--    功能-->
      <!--    查询条件-->
      <el-card class="app-container-tools">
        <div class="app-container-tools-search">
          <span>姓名：</span>
          <el-input v-model="WHERE.search" class="k-width-150-p k-mr-10" />
          <el-button type="primary" @click="_search">查询</el-button>
          <el-button type="primary" @click="_reset">重置</el-button>
        </div>
        <div class="app-container-tools-action" />
      </el-card>

      <el-card>
        <!--    表格-->
        <el-table
          ref="tb"
          v-loading="LOADING"
          :data="TABLE_DATA"
          :size="SIZE"
          border
          :height="LIST_HEIGHT_DIALOG"
          style="width: 100%"
          @selection-change="_handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <template v-for="(item) in setting">
            <el-table-column
              v-if="item.key === 'action'"
              :key="item.id"
              :label="item.name"
              :prop="item.key"
              :width="item.value"
              :fixed="item.fixed"
            >
              <template slot-scope="scope">
                <el-button @click="handleScan(scope.row)">详情</el-button>
                <el-button @click="handleTrack(scope.row)">展开</el-button>
              </template>

            </el-table-column>
            <el-table-column
              v-else-if="item.key === 'area'"
              :key="item.id"
              :label="item.name"
              :prop="item.key"
              :width="item.value"
              :fixed="item.fixed"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.region_info.province+'/'+scope.row.region_info.city+'/'+scope.row.region_info.county+'/' }}</span>
              </template>

            </el-table-column>
            <el-table-column
              v-else
              :key="item.id"
              :label="item.name"
              :prop="item.key"
              :width="item.value"
            />
          </template>
        </el-table>
        <!--    分页-->
        <pagination />
        <!--    弹窗-->
        <form-modal :visible.sync="FORM_VISIBLE" :type="FORM_TYPE" :data="FORM_DATA" @refresh="_search" />
        <scan-modal :visible.sync="scanVisible" :data="scanData" />
        <track-modal :visible.sync="trackVisible" :idcard="trackIdCard" :name="trackUserName" />
      </el-card>
    </div>
  </el-dialog>

</template>

<script>
import list from '@/list'
import BuildingPersonClass from '@/models/buildingperson-class'
import { buildingpersonGetList } from '@/api/buildingperson'
import formModal from './form'
import scanModal from './scan'
import trackModal from '@/views/warning/list/components/track'
const buildingPersonClass = new BuildingPersonClass()
export default {
  name: 'BuildingPersonList',
  components: { formModal, scanModal, trackModal },
  mixins: [list],
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    companyId: {
      type: Number,
      default: 0
    },
    companyName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      show: false,
      gateVisible: false,
      gateData: '',
      scanVisible: false,
      scanData: 0,
      trackVisible: false,
      trackIdCard: '',
      trackUserName: '',
      caseRequestURLType: '',
      setting: buildingPersonClass.list(),
      WHERE: {

      }

    }
  },
  computed: {
    title() {
      return this.companyName + '-人员信息'
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.show = val
        this.WHERE.company_id = this.companyId
        this._search()
      }
    }
  },
  created() {
    this.LIST_API = buildingpersonGetList
  },
  mounted() {
  },
  methods: {

    handleCreate() {
      console.log('添加')
      this.FORM_TYPE = 'create'
      this.FORM_VISIBLE = true
      this.FORM_DATA = {}
    },
    handleEdit(item) {
      console.log('更新')
      this.FORM_TYPE = 'edit'
      this.FORM_VISIBLE = true
      this.FORM_DATA = item
    },
    handleScan(item) {
      console.log('楼宇资料')
      this.scanVisible = true
      this.scanData = item.id
    },
    handleTrack(item) {
      console.log('轨迹')
      this.trackIdCard = item.id_card
      this.trackUserName = item.real_name
      this.trackVisible = true
    },
    handleClose() {
      console.log('点击关闭')
      this.beforeClose()
    },
    beforeClose() {
      console.log('关闭前的回调')
      this.show = false
      this.$emit('update:visible', false)
    },
    close() {
      console.log('关闭的回调')
    },
    closed() {
      console.log('关闭动画结束后的回调')
    }
  }
}
</script>
<style lang="scss">
 @import '@/styles/list/index.scss';
</style>
